<template>
  <div class="dashboard-editor-container">
    <span style="line-height: 14px; color: rgba(0, 0, 0, 0.45); font-size: 14px">待处理项目</span>

    <panel-group :project-date="projectDate" @handleSetLineChartData="handleSetLineChartData" />

    <span style="line-height: 14px; color: rgba(0, 0, 0, 0.45); font-size: 14px">项目统计</span>
    <panel-statis :project-date="projectAll" />
    <div v-show="showFlag">
      <span style="line-height: 14px; color: rgba(0, 0, 0, 0.45); font-size: 14px">项目倒计时</span>
      <div v-if="downDate.length != 0" class="downBox">
        <el-scrollbar>
          <span v-for="(item, index) in downDate" :key="index">
            <down-date :end-time="item" />
          </span>
        </el-scrollbar>
      </div>
      <div v-else class="downBox" style=" text-align: center; height: 50px; line-height: 50px; font-size: 18px; color: #ccc; ">无</div>
    </div>

    <!-- @handleSetLineChartData="handleSetLineChartData" -->
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <line-chart :data-time="dataTime" :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
// import GithubCorner from '@/components/GithubCorner'
import DownDate from './components/DownDate'
import PanelGroup from './components/PanelGroup'
import PanelStatis from './components/PanelStatis'
import LineChart from './components/LineChart'
// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'
import {
  getProjectMessage,
  // getBranchName,
  // getBranchMessage,
  getViewDate
} from '@/api/statistics'
// import { getBranch } from '@/api/branch'
import { getInfo } from '@/api/user'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 1200, 160, 1340, 1050, 1600, 1650, 1200, 1300],
    actualData: [120, 82, 91]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  },
  default: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    // GithubCorner,
    PanelGroup,
    PanelStatis,
    LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart,
    // TransactionTable,
    // TodoList,
    DownDate,
    // BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.default,
      projectDate: [],
      projectAll: [],
      branchName: '', // 选中分公司名称
      value: '', // 判断当前登录用户的角色 查询待处理数据
      time: '',
      downDate: [],
      showFlag: true,
      name: '',
      flag: false,
      endTime: '',
      branchList: [
        {
          value: '全部数据',
          label: '全部数据'
        }
      ], // 分公司名称list
      dataTime: [] // 数据表对应的时间
    }
  },
  created() {
    this.getUserInfo()
    // this.getViewDates(null)
  },
  methods: {
    // 获取数据表视图数据 当月
    getViewDates(val) {
      new Promise((resolve, reject) => {
        getViewDate({ id: val }).then((response) => {
          // console.log(response.data);
          // 默认显示当月所有项目数据
          lineChartData.default.expectedData = response.data.count
          this.downDate = response.data.downDate
          this.dataTime = response.data.time
        })
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    // 获取所有项目数据
    getProjectDate() {
      new Promise((resolve, reject) => {
        getProjectMessage({ value: this.value }).then((response) => {
          this.projectDate = response.data[0]
          this.projectAll = response.data[1]
        })
      })
    },
    // 获取当前用户的登录信息
    getUserInfo() {
      this.$store.dispatch('user/getInfo').then((response) => {
        console.log(response.per)

      })
      // new Promise((resolve, reject) => {
      //   getInfo().then((response) => {
      //     this.username = response.data.name // 当前登录用户的姓名
      //     this.userPermissions = response.data.per // 当前登录用户权限数组
      //     this.user_id = response.data.id // 当前登录用户id
      //     if (response.data.is_clerk == '2') {
      //       this.value = '2' // 是2代表是分公司账号
      //     }
      //     if (response.data.is_clerk == '1') {
      //       this.value = '1' // 是1代表是科员账号
      //     }
      //     for (let i = 0; i < this.userPermissions.length; i++) {
      //       // 查看项目权限
      //       if (this.userPermissions[i] == 'watch project') {
      //         this.value = '0' // 是0代表是查看项目权限 获取全部项目的待处理
      //       }
      //       if (this.userPermissions[i] == 'engineering statistics') {
      //         this.value = '3'
      //         this.showFlag = false
      //       }
      //     }
      //     // 获取当前登录用户信息后获取项目信息
      //     this.getProjectDate()
      //   })
      // })
    }
  }
}
</script>

<style >
.downBox {
  /* height: 108px; */
  max-height: 108px;
  cursor: pointer;
  /* font-size: 12px; */
  /* position: relative; */
  /* overflow: hidden; */
  color: #666;
  width: auto;
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 32px;
  margin-top: 18px;
}
.downBox .el-scrollbar {
  height: 100%;
}
.downBox .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
  max-height: 108px;
  margin-bottom: 0px !important;
  /* padding: 10px; */
  /* height: 300px; */
}
</style>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
